import React, { useState } from "react"
import { SearchBar, List } from "antd-mobile"
import http from "../../utils/http"
import "./index.css"
import useDebounce from "../../hook/useDebounce"
function Index() {
  const [list, setList] = useState([])
  const [serVal, setSerVal] = useState("")
  const handelSearch = useDebounce(async wd => {
    const result = await http.get("/api/city/search", { params: { wd } })
    console.log(result)
    const { data, code } = result.data
    if (code === 200) {
      setList(data)
    }
  }, 1000)
  return (
    <div>
      <div className="ser-bar-nav">
        <SearchBar
          showCancelButton
          value={serVal}
          onChange={val => {
            setSerVal(val)
            handelSearch(val)
          }}
          style={{
            "--background": "#ffffff",
            "--height": "40px",
            "--padding-left": "12px",
          }}
        />
      </div>
      {serVal !== "" && (
        <List>
          {list.length > 0 &&
            list.map((item, index) => (
              <List.Item key={index}> {item.name}</List.Item>
            ))}
        </List>
      )}
    </div>
  )
}

export default Index
